<template>
  <el-container>
    <div class="header-view">
      <!-- 这里放置头部内容，如导航栏、标题等 -->
      <Aside :asideWidth="asideWidth" :isCollapse="isCollapse" />
    </div>
    <div style="width: 100%; flex-wrap: wrap;">
      <Header :collapseIcon="collapseIcon" :handleCollapse="handleCollapse" />
      <el-main class="content-main">
        <router-view class="main-view" />
      </el-main>
    </div>
  </el-container>
</template>

<script>
import Aside from '../components/Main.vue';
import Header from '../components/Header.vue';

export default {
  components: {
    Aside,
    Header,
  },
  data() {
    return {
      isCollapse: false,
      asideWidth: '100px',
      collapseIcon: 'el-icon-s-fold',
      showHome: false,
    };
  },
  methods: {
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.asideWidth = '64px';
        this.collapseIcon = 'el-icon-s-unfold';
      } else {
        this.asideWidth = '200px';
        this.collapseIcon = 'el-icon-s-fold';
      }
    },
  },
};
</script>

<style scoped>
/* 可以在这里添加样式 */
.content-main {
  height: 100%;
  width: 100%;
  padding: 0;
}

.aside {
  border: 1px black solid;
  padding: 0;
}

.el-container {
  overflow-y: hidden;
  overflow-x: hidden;
}
</style>